<template>
    <div class="notice-box" v-loading="load">
        <div class="title-box">
            {{ info.title }}
        </div>
        <div class="line-box"></div>
        <div class="body-content-box" v-html="info.content">

        </div>
        <div class="footer-time-box">
            {{ info.create_time }}
        </div>
    </div>
</template>

<script>
export default {
    name: "notice-detail",
    data() {
        return {
            id: '',
            info: {},
            load: false,
        }
    },
    mounted() {
        this.id = this.$route.params.id;
        this.getData();
    },
    methods: {
        getData() {
            this.load = true;
            this.ajaxs('index/getNoticeDetail', {
                data: { id: this.id },
                success: (res) => {
                    this.info = res.msg;
                    this.load = false;
                }
            })
        },
        changePage(e) {
            this.form.page = e;
            this.getData();
        },
    },
    watch() {
        if (this.$route.params.id) {
            this.id = this.$route.params.id;
            this.getData();
        }
    }
}
</script>

<style scoped>
.footer-time-box {
    width: 100%;
    padding: 20px;
    text-align: right;
}

.body-content-box {
    padding: 15px;
    min-height: 500px;
}

.line-box {
    border-top: 1px #F1F1F1 solid;
    margin-top: 20px;
}

.notice-box {
    width: 1000px;
    margin: 20px auto;
    background-color: #FFFFFF;
    padding: 20px;
}

.title-box {
    height: 60px;
    padding: 10px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
</style>
